<!-- 地图 -->
<template>
    <view>
    	<map style="width: 750rpx; height: 100vh;" :latitude="latitude" :longitude="longitude" show-location @updated="getCity"
    	 :markers="markers" @markertap="onMarker" @tap="onTap">
    		<cover-view class="search-box" @click="to_search">
    			<cover-view class="search" >
    				<cover-image class="img" src="@/static/img/common_ic_01_bbb.png"></cover-image>
    				<cover-view>输入附近网点名称搜索</cover-view>
    			</cover-view>
    		</cover-view>
    		<view class="card-box" v-if="is_marker">
    			<view class="card">
    				<view class="label">
    					<cover-view class="info">
    						<cover-view class="name">深圳天健世纪支行</cover-view>
    						<cover-view class="tag">休息中</cover-view>
    					</cover-view>
    					<cover-view class="icons">
    						<cover-image class="icon" src="@/static/img/ic_dial.png"></cover-image>
    						<!-- <cover-image class="icon" src="@/static/img/ic_current_location.png"></cover-image> -->
    					</cover-view>
    				</view>
    				<view class="value">
    					<view class="distance">
    						<image class="distance-icon" src="@/static/img/ic_positioning.png"></image>
    						<view>距离0m</view>
    					</view>
    					<view class="distance">
    						<image class="distance-icon" src="@/static/img/ic_walk.png"></image>
    						<view>步行0分钟</view>
    					</view>
    					<view class="distance">
    						<image class="distance-icon" src="@/static/img/ic_drive.png"></image>
    						<view>开车0分钟</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</map>
    </view>
</template>

<script>
    export default {
    	data() {
    		return {
    			old_id: null,
    			is_marker: true,
    			markers: [{
    				id: 1,
    				width: 24,
    				height: 32,
    				latitude: 24.87389,
    				longitude: 118.67587,
    				iconPath: '/static/img/logo.png'
    			}, {
    				id: 2,
    				width: 24,
    				height: 32,
    				latitude: 24.87389,
    				longitude: 118.67510,
    				iconPath: '/static/img/logo.png'
    			}]
    		};
			
    	},
    	computed: {
    		latitude() {
    			return this.$store.state.location.latitude
    		},
    		longitude() {
    			return this.$store.state.location.longitude
    		},
    	},
    	methods: {
    		getCity() {
    			setTimeout(() => {
    				let address = this.$store.state.location.address
    				uni.setNavigationBarTitle({
    					title: address
    				});
    			}, 500)
    		},
    		onMarker(e) {
    			let id = e.detail.markerId;
    			if(id == this.old_id) return;
    			if(this.old_id) {
    				this.markers[this.old_id - 1].iconPath = '/static/logo.png'
    				this.markers[this.old_id - 1].width = 24
    				this.markers[this.old_id - 1].height = 32
    			}
    			this.markers[id - 1 ].iconPath = '/static/logo_selected.png'
    			this.markers[id - 1 ].width = 32
    			this.markers[id - 1 ].height = 42
    			this.old_id = id;
    			this.is_marker = true
    		},
    		onTap() {
    			if(this.old_id) {
    				this.markers[this.old_id - 1].iconPath = '/static/logo.png'
    				this.markers[this.old_id - 1].width = 24
    				this.markers[this.old_id - 1].height = 32
    				this.old_id = null
    			}
    			this.is_marker = false
    		},
    		to_search() {
    			// console.log(22222)
    			uni.navigateTo({
    				url: '/pages/search/index'
    			})
    		},
    	},
    	mounted() {}
    }
</script>

<style lang="scss">
    .search-box {
    	z-index: 999;
    	position: fixed;
    	top: 50rpx;
    	left: 28rpx;
    	right: 28rpx;
    
    	.search {
    		display: flex;
    		align-items: center;
    		padding: 30rpx 40rpx;
    		background: #fff;
    		border-radius: 16rpx;
    		font-size: 28rpx;
    		line-height: 36rpx;
    		color: #999999;
    
    		.img {
    			margin-right: 20rpx;
    			width: 36rpx;
    			height: 36rpx;
    			background-size: 100% 100%;
    		}
    	}
    }
    
    .card-box {
    	z-index: 999;
    	position: fixed;
    	bottom: 68rpx;
    	left: 28rpx;
    	right: 28rpx;
    
    	.card {
    		background-color: #FFFFFF;
    		border-radius: 16rpx;
    
    		.label {
    			padding: 30rpx 32rpx;
    			display: flex;
    			justify-content: space-between;
    			align-items: center;
    			border-bottom: 1px solid #eeeeee;
    
    			.info {
    				display: flex;
    				align-items: center;
    
    				.name {
    					padding-right: 16rpx;
    					font-size: 32rpx;
    					color: #002747;
    					font-weight: 550;
    					line-height: 64rpx;
    				}
    
    				.tag {
    					background-color: #F8F8FB;
    					color: #666666;
    					font-size: 22rpx;
    					padding: 8rpx 12rpx;
    					border-radius: 8rpx;
    				}
    			}
    
    			.icons {
    				display: flex;
    
    				.icon {
    					width: 64rpx;
    					height: 64rpx;
    					background-size: 100%;
    				}
    			}
    		}
    
    		.value {
    			width: 100%;
    			padding: 20rpx 32rpx;
    			display: flex;
    			box-sizing: border-box;
    
    			.distance {
    				width: 33.3%;
    				font-size: 24rpx;
    				line-height: 40rpx;
    				color: #999999;
    				display: flex;
    				align-items: center;
    
    				.distance-icon {
    					width: 40rpx;
    					height: 40rpx;
    					margin-right: 12rpx;
    					background-size: 100%;
    				}
    			}
    		}
    	}
    }
</style>
